$(document).ready(function() {

	/*** Add multi data in Avoidance Word Add ***/
    var wrapper         = $(".table_multi_fields"); //Table contain the <tr>
    var wrapper_temp	= $(".table_multi_fields_temp"); //Table for confirm box
    var add_button      = $("#addRow"); //Add more button
    
    var x = 1; //The counter
    $(add_button).click(function(e){
    	var author = $("#current_user").val();
    	var time = $("#current_time").val();
        e.preventDefault();
            //Text box increment
        	//This content have to write in one line, NO Enter allowed
        	//This contents below are very IMPORTANT, if you want to change, it will change many thing in many functions in this file. Be careful !
            $(wrapper).append('<tr><td class="text-l" name="aw"><input name="data[MAvoidanceWord]['+x+'][avoidance_word]" type="text" autocomplete="off" id="avoidance_word" class="form-control top noradius" maxlength="200"></td><td class="text-l" name="awy"><input name="data[MAvoidanceWord]['+x+'][avoidance_word_yomi]" type="text" autocomplete="off" id="avoidance_word_yomi" class="form-control top noradius" maxlength="200"></td><td class="text-l" name="rw"><input name="data[MAvoidanceWord]['+x+'][replace_word]" type="text" autocomplete="off" id="replace_word" class="form-control top noradius" maxlength="200"></td><td class="text-l" name="rwy"><input name="data[MAvoidanceWord]['+x+'][replace_word_yomi]" type="text" autocomplete="off" id="replace_word_yomi" class="form-control top noradius" maxlength="200"></td><td><input type="hidden" name="data[MAvoidanceWord]['+x+'][creator]" value="'+author+'" id="MAvoidanceWordCreator"><input type="hidden" name="data[MAvoidanceWord]['+x+'][create_time]" value="'+time+'" id="MAvoidanceWordCreateTime"><a href="#" class="remove_field" delIndex="'+x+'">Del</a></td></tr>'); //add input box
            $(wrapper_temp).append('<tr class="abc_'+x+'"><td class="text-l" name="aw"><input type="text" name="AvoidanceWord" id="avoidance_word_temp" class="form-control top noradius" placeholder="NO DATA" autofocus="autofocus" autocomplete="off" disabled=""></td><td class="text-l" name="awy"><input type="text" name="AvoidanceWordYomi" id="avoidance_word_yomi_temp" class="form-control top noradius" placeholder="NO DATA" autofocus="autofocus" autocomplete="off" disabled=""></td><td class="text-l" name="rw"><input type="text" name="ReplaceWord" id="replace_word_temp" class="form-control top noradius" placeholder="NO DATA" autofocus="autofocus" autocomplete="off" disabled=""></td><td class="text-l" name="rwy"><input type="text" name="ReplaceWordYomi" id="replace_word_yomi_temp" class="form-control top noradius" placeholder="NO DATA" autofocus="autofocus" autocomplete="off" disabled=""></td></tr>'); //add input box
        x++;
    });
    
    //Event to click delete the fields
    $(wrapper).on("click",".remove_field", function(e){
        e.preventDefault(); 
        $(wrapper_temp).find(".abc_"+$(this).attr("delIndex")).remove();
    	$(this).parents('tr').remove();
    })
    
    
    
	/*** Confirm box ***/
	$('a.confirm-window').click(function() {
	
	    var confirmBox = $(this).attr('href');
	
	    $(".table_multi_fields").find("tr").each(function( index ) {
	    	if(index > 0) //The index "0" is the <tr> which have header of table
	    	{
	    		//Find the del button in real form, get the number of this <tr>
		    	Tempindex=$(this).find(".remove_field").attr("delIndex");
		    	//Identify the <tr> have the class .abc_ with index number as real form
		    	trTemp=$(".table_multi_fields_temp").find(".abc_"+Tempindex);
		    	//Get the value in real form and add to temp form
		    	$(trTemp).find("#avoidance_word_temp").val($(this).find("#avoidance_word").val());
		    	$(trTemp).find("#avoidance_word_yomi_temp").val($(this).find("#avoidance_word_yomi").val());
		    	$(trTemp).find("#replace_word_temp").val($(this).find("#replace_word").val());
		    	$(trTemp).find("#replace_word_yomi_temp").val($(this).find("#replace_word_yomi").val());
	    	}
	    });
	    
	   
	
	    //****** VALIDATION ******//
	    var flag = true;
	    
	    $(".table_multi_fields").find("tr").each(function( index ) {
	    	if(index > 0) 
	    	//The index "0" is the <tr> which have "Please confirm your information before we save it !" text
	    	//The index "1" is the <tr> which have header of table
	    	{
	    		//Find the del button in real form, get the number of this <tr>
		    	Tempindex=$(this).find(".remove_field").attr("delIndex");
		    	//Identify the <tr> have the class .abc_ with index number as real form
		    	trTemp=$(".table_multi_fields_temp").find(".abc_"+Tempindex);
		    	
		    	//Check Avoidance Word
		    	if($(trTemp).find("#avoidance_word_temp").val() == "") 
				{
					//Blank or not
		    		$(trTemp).find("#avoidance_word_temp").addClass("red-placeholder");
					flag = false;
				}else	
					$(trTemp).find("#avoidance_word_temp").removeClass("red-placeholder");
				
		    	//Check Avoidance Word
		    	if($(trTemp).find("#avoidance_word_yomi_temp").val() != "") 
				{
		    		var kana = $(trTemp).find("#avoidance_word_yomi_temp").val();
					if (ZenKanaCheck(kana) == false) {
						$(trTemp).find("#avoidance_word_yomi_temp").addClass("red-text");
						flag = false;
					} 
					else 
					{
						$(trTemp).find("#avoidance_word_yomi_temp").removeClass("red-text");
					}
				}
		    	
		    	//Replace Word
		    	if($(trTemp).find("#replace_word_temp").val() == "") 
				{
					//Blank or not
		    		$(trTemp).find("#replace_word_temp").addClass("red-placeholder");
					flag = false;
				}else	
					$(trTemp).find("#replace_word_temp").removeClass("red-placeholder");
		    	
		    	
		    	//Check Avoidance Word
		    	if($(trTemp).find("#replace_word_yomi_temp").val() != "") 
				{
		    		var kana = $(trTemp).find("#avoidance_word_yomi_temp").val();
					if (ZenKanaCheck(kana) == false) {
						$(trTemp).find("#replace_word_yomi_temp").addClass("red-text");
						flag = false;
					} 
					else 
					{
						$(trTemp).find("#replace_word_yomi_temp").removeClass("red-text");
					}
				}
	    	}
	    });
	    		
		//Control submit button base on valiadation
		if(flag)
	    {
	    	document.getElementById("submit").removeAttribute('disabled'); //Check True enable submit button
	    }
	    else
	    	document.getElementById("submit").setAttribute('disabled', 'disabled');
		//****** END VALIDATION ******//
		
	    $(confirmBox).fadeIn("slow");
	    $('body').append('<div id="over"></div>');
	    $('#over').fadeIn(300);
	    
	});
	
	$(document).on('click', ".close-btn, #over", function() { 
	    $('#over, .confirm-form').fadeOut(300 , function() {
	        $('#over').remove();  
	    }); 

	});
	
	
	
	
});// End ready

